
Vue.component2('a_1_0_1_4_0', {  
    template: `
        <div class="a_1_0_1_4_0_menu_bar" :key="refresh" :style="'width:'+data.width">

        </div>
`,  
  data() {
      return {
        now_select:"-1",
        refresh:"1",/*用来刷新组件*/
        data:{
            width:"80%",
            menus: {

        },
        fast_menu:[],//存放menus ids的数组 ids被转为整数 按照sort顺序排列
        show_flag:{}
        }
         
      };
  },
  methods: {
      showSubMenu(menu_id) {
          this.data.menus[menu_id].showSubMenu = true;
          if (!this.data.show_flag[menu_id]){
            this.now_select=menu_id;
            this.data.show_flag[menu_id]=this.data.menus[menu_id].item_fast_length &&this.data.menus[menu_id].showSubMenu;
            this.refresh=this.refresh=="2"?"1":"2";
          }
      },
      hideSubMenu(menu_id) {
          this.data.menus[menu_id].showSubMenu = false;
          this.data.show_flag[menu_id]=false;
          this.refresh=this.refresh=="2"?"1":"2";
      },
      handleClick(menu_id,item_id) {
          alert(`当前点击${menu_id} ${item_id}`);
      },

  },
  mounted:function(){
    //调用此函数刷新整个组件
    _this.refresh_func=function(){
        //创建菜单目录 快速查找数组
        _this.data.fast_menu=(Object.keys(_this.data.menus).map(Number)).sort();
        //创建菜单目录的选项快速查找数组
        let menu_id=null;
        for (let i=0;i<_this.data.fast_menu.length;i++){
            menu_id=_this.data.fast_menu[i];
            _this.data.show_flag[menu_id]=false;
            _this.data.menus[menu_id].item_fast=(Object.keys(_this.data.menus[menu_id].item_dct).map(Number)).sort();
            _this.data.menus[menu_id].item_fast_length=_this.data.menus[menu_id].item_fast.length;
        }
        //更改key 从而刷新整个组件
        _this.refresh=_this.refresh=="2"?"1":"2";
        // console.log("刷新:",_this.refresh);
    }

    
      //查看当前目录数据
      //设置选项
      _this.data.set_item=function(obj){
        /*
        menu_id:目录id
        item_id:选项id
        item_name:选项名称
        item_callback:选项回调
        item_keys:选项快捷方式  //后面需要
        */
        let menu_id=obj.menu_id;
        let item_id=obj.item_id;
        let item_name=obj.item_name;
        let item_callback=obj.item_callback;
        let item_keys=obj.item_keys;
       //如果已经那么仅修改名称
       if (!_this.data.menus.hasOwnProperty(menu_id)){
        //如果没有拥有这个目录 则新建一个
        _this.data.menus[menu_id]={
            "menu_name":'未命名目录',
            "menu_fast":'',
            "showSubMenu":false,
            "item_dct":{},//当前目录的选项
        }
       }
       //如果当前选项已经拥有  那么修改选项相关属性
       if(_this.data.menus[menu_id].item_dct.hasOwnProperty(item_id)){
        _this.data.menus[menu_id].item_dct[item_id].item_name=item_name;
        _this.data.menus[menu_id].item_dct[item_id].item_callback=item_callback;
        _this.data.menus[menu_id].item_dct[item_id].item_keys=item_keys;
       }else
       //如果当前选项没有拥有 那么新建这个选项
        {
            _this.data.menus[menu_id].item_dct[item_id]={
                'item_name':item_name,
                "item_callback":item_callback,
                "item_keys":item_keys
            }
        }
        _this.refresh_func();//刷新组件
      },
      //设置目录
      _this.data.set_menu=function(obj){
        /*
        menu_id:目录id
        menu_name:目录名称
        menu_keys:目录快捷方式
        */
       let menu_id=obj.menu_id;
       let menu_name=obj.menu_name;
       let menu_keys=obj.menu_keys;
       //如果已经拥有这个目录 那么仅修改名称
       if (_this.data.menus.hasOwnProperty(menu_id)){
        _this.data.menus[menu_id]['menu_name']=menu_name;
        _this.data.menus[menu_id]['menu_keys']=menu_keys;
       }else{
        //如果没有拥有则新建一个
        _this.data.menus[menu_id]={
            "menu_name":menu_name,
            "menu_keys":menu_keys,
            "showSubMenu":false,
            "item_dct":{},//当前目录的选项
        }
       }
       _this.refresh_func();//刷新组件
      },
      //绑定快捷方式对象
      _this.data.bind_fast_obj=function(fast_obj){
        /*快捷方式通过全局 快捷方式对象进行调用*/
      }
  }
} 
);

